<template>
	<div class="dueRecord">
		<AreaWarp :padding="true">
	        <SearchWarp :label="'联系号码'">
	          <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'提醒日期'">
	          	<el-date-picker v-model="searchInfo.time" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <SearchWarp :label="'提醒状态'">
		        <el-select v-model="searchInfo.status"  placeholder="请选择">
		          <el-option v-for="item in statusOptions"
		                     :key="item.value"
		                     :label="item.label"
		                     :value="item.value">
		          </el-option>
		        </el-select>
		    </SearchWarp>
	        <BtnWarp>
	          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
	          <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
	        </BtnWarp>
	     </AreaWarp>

	   	<AreaTitleWarp :title="'订单列表'">
          	<el-button type="primary" icon="el-icon-circle-plus" @click="dialogVisible=true">新增</el-button>
          	<el-button type="primary" icon="el-icon-refresh" @click="search">刷新</el-button>
      	</AreaTitleWarp>

      	<!--搜索结果区域-->
      <AreaWarp :padding="false">
        <el-table :data="tableInfo.remindListDto" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
          tooltip-effect="dark"   
        >

          <el-table-column prop="num" label="序号" min-width="120"></el-table-column>
          <el-table-column prop="remindTime" label="提醒时间" min-width="180" :formatter="formatter_timeYMDHMS"></el-table-column>
          <el-table-column prop="collectionUserRealname" label="提醒员" min-width="120"></el-table-column>
          <el-table-column prop="relationName" label="联系人姓名" min-width="120"></el-table-column>
          <el-table-column prop="relation" label="与借款人关系" min-width="120" :formatter="filter_relation"></el-table-column>
          <el-table-column prop="relationMobile" label="联系人电话" min-width="120"></el-table-column>
          <el-table-column prop="repayWish" label="本人还款意愿" min-width="120" :formatter="formatter_repayWish"></el-table-column>


          <el-table-column prop="status" label="提醒状态" min-width="120" :formatter="filter_status"></el-table-column>
          <el-table-column prop="isWishRemind" label="是否愿意转告" min-width="120" :formatter="formatter_isWishRemind"></el-table-column>

          <el-table-column prop="content" label="备注" min-width="180"></el-table-column>
        </el-table>
        <el-pagination
          layout="total,sizes,prev, pager, next, jumper" class="pub-page"
          :current-page="searchInfo.page"
          :page-sizes="[20,50,100]"
          :page-size="searchInfo.size"
          :total="tableInfo.total"
          @current-change="search"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </AreaWarp>

	
      <el-dialog  title="" :visible.sync="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="50%" close="entryCancel">
		  <div class="dialog-body" >
		  	<ul class="body-operation">
		  		<li>
		  			<span class="span1">联系电话:</span>
		  			<span class="span2">
		  				<el-input v-model="relationInfo.relationMobile" placeholder="请输入电话"></el-input>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">联系人姓名:</span>
		  			<span class="span2">
		  				<el-input v-model="relationInfo.relationName" placeholder="请输入姓名"></el-input>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">关系:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.relation" placeholder="请选择" @change="getRelation">
						    <el-option
						      v-for="item in relationOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">联系状态:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.status" placeholder="请选择" @change="statusChange">
						    <el-option
						      v-for="item in statusOptionsAdd"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  				
		  			</span>
		  		</li>
				<!-- 还款意愿or是否愿意转告 -->
				<li v-if="relationFlag && relationSelf && statusFlag && statusSuc">
		  			<span class="span1">还款意愿:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.repayWish" placeholder="请选择">
						    <el-option
						      v-for="item in repayWishOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  				
		  			</span>
		  		</li>
				<li v-if="relationFlag && !relationSelf && statusFlag && statusSuc">
		  			<span class="span1">是否愿意转告:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.isWishRemind" placeholder="请选择">
						    <el-option
						      v-for="item in wishCallOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  				
		  			</span>
		  		</li>
				<!--  -->

		  		<li>
		  			<span class="span1">备注:</span>
		  			<span class="span2">
		  				<el-input
						  type="textarea"
						  :rows="2"
						  placeholder="请输入内容"
						  v-model="relationInfo.content">
						</el-input>
		  			</span>
		  		</li>
		  	</ul>

		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="entryCancel">取 消</el-button>
		    <el-button type="primary" @click="entrySure">确 定</el-button>
		  </span>
	  </el-dialog>



	</div>
</template>
<script>
	import Warn  from '../../../assets/js/warn.js';
	import {collectionStatus,relationStatus} from '../../../assets/js/collectionStatus';

	export default({
		props:["queryMsg"],
		data(){
			return{
				searchInfo:{
					status: '',
					time:'',
					mobile:'',
					size: 50,
					page: 1,
				},
				statusOptions:[],
				statusOptionsAdd:[],
				relationOptions:[],
				transmitWillOptionsAdd:[],
				tableInfo:{
					total:0,
					list:[]
				},
				dialogVisible: false,
				relationInfo:{
					collectionUserId: this.localData('get', 'login_user').id,
					collectionUserRealname: this.localData('get', 'login_user').realName,
					borrowId: this.queryMsg.borrowId,
					relationName:'',
					relationMobile: '',
					relation: '',
					status: '',
					transmitWill:'',
					content: '',
				},
				relationFlag:false,
				relationSelf:false,
				statusFlag:false,
				statusSuc:false,
				wishCallOptions:[
					{
                        value: 1,
                        label:"是"
                    },
                    {
                        value: '0',
                        label:"否"
					},
					{
                        value: -1,
                        label:"不祥"
                    }
				],
				repayWishOptions:[
					{
                        value: 1,
                        label:"有"
                    },
                    {
                        value: '0',
                        label:"无"
					},
					{
                        value: -1,
                        label:"不详"
                    }
				]
			}
		},
		methods:{
			// 关系切换
			getRelation(val){
				let that = this;
				if(val){
					that.relationFlag = true;
					if(val == 1){
						that.relationSelf = true
					}else{
						that.relationSelf = false
					}
				}else{
					that.relationFlag = false;
				}
			},
			//状态切换
			statusChange(val){
				let that = this;
				if(val){
					that.statusFlag = true;
					if(val == 24){
						that.statusSuc = true
					}else{
						that.statusSuc = false
					}
				}else{
					that.statusFlag = false;
				}
			},
			// 状态
			status(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/custom/remindStatus',
			            success: function (res) {
				            if (res.code == '0') {			            	
								let data = res.data;
				            	data.forEach(function(item){
				            		that.statusOptions.push({
				            			value: item.id,
	          							label: item.resource
				            		})
				            		that.statusOptionsAdd.push({
				            			value: item.id,
	          							label: item.resource
				            		})

				            	})
				            	resolve()
				            }
				         }
			        })	
				})
			},
			//关系
			relation(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/collection/relationList',
			            success: function (res) {
				            if (res.code == '0') {			            	
				            	let data = res.data;
				            	data.forEach(function(item){
				            		that.relationOptions.push({
				            			value: item.id,
	          							label: item.resource
				            		})

				            	})
				            	resolve()
				            }
				         }
			        })	
				})
			},
			//转告
			transmit(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/finance/resourcelist',
			            success: function (res) {
				            if (res.code == '0') {			            	
				            	let data = res.data;
				            	data.forEach(function(item){
				            		that.transmitWillOptionsAdd.push({
				            			value: item.id,
	          							label: item.resource
				            		})
				            	})
				            	resolve()
				            }
				         }
			        })	
				})
			},
			handleSizeChange(val){
				let that = this
                that.searchInfo.size = val;
                that.searchInfo.page = 1;
                that.search()
			},
			search(currentPage){
				let that = this;
				that.searchInfo.page = typeof currentPage == 'number' ? currentPage : 1;
				let warn = new Warn(that.searchInfo)
				let reqData = warn.getState();
				if(reqData.code){
					that.showMsg(reqData.message,'error')
					return 
				}
				reqData.borrowId = that.queryMsg.borrowId
				that.loading = true;
				that.ajaxJson({
		            url: '/custom/remindList',
		            data: reqData,
		            success: function (res) {
			            if (res.code == '0') {			            	
			            	that.tableInfo = res.data
			            	resolve()
			            }
			            that.loading = false;
			         }
		        })
			},
			//重置
			reset(){
				let that = this;
				that.searchInfo = {
					status: '-1',
					time:'',
					mobile:'',
					size: 50,
					page: 1
				}
				that.tableInfo = {
					total:0,
					list:[]
				}
				that.search();
			},
			//取消
			entryCancel(){
				let that = this;
				that.relationInfo = {
					collectionUserId: this.localData('get', 'login_user').id,
					collectionUserRealname: this.localData('get', 'login_user').realName,
					borrowId: this.queryMsg.borrowId,
					relationName:'',
					relationMobile: '',
					status: '',
					transmitWill:'',
					content: '',
					relation: ''
				}
				that.relationFlag = false;
				that.dialogVisible = false;
			},
			//确定添加
			entrySure(){
				let that = this;
		        if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.relationInfo.relationMobile)){
		        	that.showMsg("请输入正确的手机号","error")
		            return 
		        }
		        if(!that.relationInfo.relationName){
		        	that.showMsg("请输入联系人姓名","error")
		            return
		        }
		        if(!that.relationInfo.relation){
		        	that.showMsg("请输入选择关系","error")
		            return
		        }
		        if(!that.relationInfo.status){
		        	that.showMsg("请选择联系状态","error")
		            return
				}
				if(that.relationFlag && that.relationSelf && !that.relationInfo.repayWish && that.statusSuc){
					that.showMsg("请选择还款意愿","error")
		            return
				}
				if(that.relationFlag && !that.relationSelf && !that.relationInfo.isWishRemind && that.statusSuc){
					that.showMsg("请选择转告意愿","error")
		            return
				}
		        if(!that.relationInfo.content){
		        	that.showMsg("请输入备注","error")
		            return
		        }
		        that.ajaxJson({
		            url: '/custom/saveRemind',
		            data: that.relationInfo,
		            success: function (res) {
			            if (res.code == '0') {			            	
			            	that.$message({
				                type: 'success',
				                message: '添加成功!'
				            });
				            that.entryCancel();
				            that.$emit('userCollection',{
				            	dialogVisibleShow: false
				            })
						}
						that.search()
			         }
		        })
			},
			filter_status: collectionStatus,
			filter_relation: relationStatus,

		},
		created(){
			let that = this;
			Promise.all([
				that.status(),
				that.relation(),
				that.transmit()
			]).then(arr=>{
				that.search();
			})
		}
	})
</script>
<style lang="less">
	.dueRecord{
		.dialog-body{
			width:100%;
			.body-message{
				width:100%;
				overflow: hidden;
				li{
					width:33.3%;
					float: left;
					line-height: 30px;
					.span1{
						color:#999;
					}
					.span2{
						color:#000;
					}
				}
			}
			.body-operation{
				margin-top:20px;
				li{
					display: flex;
					line-height: 40px;
					margin-bottom: 10px;
					.span1{
						width:120px;
						flex:none;
						color:#999;
						text-align: right;

					}
					.span2{
						flex:1;
						margin-left: 20px;
						.el-input{
							width:50% !important;
						}
						.el-select{
							.el-input{
								width:100% !important;
							}
						}
						.el-input__inner{
							width:100%;
							height:36px;
							padding:0 5px;
						}
						.el-checkbox__inner{
							
						}
					}
				}
			}
		}
	}
</style>